<template>
  <div class="page-overview">
    <!-- 数据 -->
    <!-- 实时概况板块 -->
    <div class="realtime-situation">
      <!-- 栏目标题行 -->
      <div class="new-page-title">
        <!-- 左边 -->
        <div class="title-left">
          <p class="line" />
          <span class="text">{{ $t("dataAnalysis.goodsDet") }}</span>
        </div>
        <!-- 右边 -->
        <div class="new-page-title-right">
          <div class="title-right">
            <el-select
              v-model="dateValue"
              style="width: 100px;"
              @change="setDateRange(dateValue)"
            >
              <el-option
                v-for="item in dateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span
              v-if="dateValue === 1"
              class="title-time"
            >{{
              nowDate
            }}</span>
            <button
              v-if="dateValue === 1"
              data-v-3baf97fc
              class="el-button el-button--text el-button--small"
              @click="flushDateTime"
            >
              {{ $t("dataAnalysis.refresh") }}
            </button>
            <span
              v-if="dateValue === 2 || dateValue === 3"
              class="title-time"
            >{{ dateRange[0] }} {{ $t('date.tip') }} {{ dateRange[1] }}</span>
          </div>
          <div class="title-picker">
            <el-date-picker
              v-if="dateValue === 4"
              v-model="dateRange[0]"
              style="width: 150px"
              type="date"
              :placeholder="$t('dataAnalysis.selectDate')"
              :picker-options="PickerOptions"
              :disabled-date="onDateDisabled"
              @change="handleRangeFour()"
            />
          </div>
          <div class="title-picker">
            <el-date-picker
              v-if="dateValue === 5"
              v-model="preMonth"
              style="width: 150px"
              type="month"
              :placeholder="$t('dataAnalysis.selectMonth')"
              :picker-options="monthPickerOptions"
              @change="handleMonth()"
            />
          </div>
        </div>
      </div>
      <!-- /栏目标题行 -->
      <!-- 商品概况列表 -->
      <div class="item-list">
        <ProdSurveyTable :prod-data="prodData" />
      </div>
    </div>
    <div>
      <div class="title-text-info">
        <span style="padding: 9px">{{ $t("dataAnalysis.decText") }}</span>
      </div>
    </div>
    <!-- /说明文字板块 -->
    <!-- 整体看板 -->
    <div class="whole-plate">
      <!-- 栏目标题行 -->
      <div class="new-page-title">
        <div class="title-left">
          <p class="line" />
          <span class="text">{{
            $t("dataAnalysis.commodityTrendAnalysis")
          }}</span>
        </div>
        <div class="title-right">
          <el-select
            v-model="dateValue3"
            style="width: 100px;"

            @change="setDateRange3(dateValue3)"
          >
            <el-option
              v-for="item in dateOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span
            v-if="dateValue3 === 2 || dateValue3 === 3"
            class="title-time"
            style="margin:0 0 0 12px;"
          >{{ dateRange3[0] }} {{ $t('date.tip') }} {{ dateRange3[1] }}</span>
          <div class="title-picker">
            <el-date-picker
              v-if="dateValue3 === 5"
              v-model="preMonth3"

              style="width: 150px"
              type="month"
              :placeholder="$t('dataAnalysis.selectMonth')"
              :picker-options="monthPickerOptions"
              @change="handleMonth3()"
            />
          </div>
          <div>
            <el-popover
              placement="right"
              width="500"
              trigger="click"
            >
              <el-form
                :model="customIndexForm"
                class="form-inline"
                @submit.prevent
              >
                <el-form-item :label="$t('dataAnalysis.productsOverview')">
                  <el-checkbox-group v-model="customIndexForm.prodSurvey">
                    <el-checkbox
                      :label="$t('dataAnalysis.goodsOnShelf')"
                      name="prodSurvey"
                    />
                    <el-checkbox
                      :label="$t('dataAnalysis.goodsVisited')"
                      name="prodSurvey"
                    />
                    <el-checkbox
                      :label="$t('dataAnalysis.goodsSold')"
                      name="prodSurvey"
                    />
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item :label="$t('dataAnalysis.commodityFlow')">
                  <el-checkbox-group v-model="customIndexForm.prodFlow">
                    <el-checkbox
                      :label="$t('dataAnalysis.shareVisits')"
                      name="prodSurvey"
                    />
                    <el-checkbox
                      :label="$t('dataAnalysis.productViews')"
                      name="prodSurvey"
                    />
                    <el-checkbox
                      :label="$t('dataAnalysis.productVisitors')"
                      name="prodSurvey"
                    />
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item :label="$t('dataAnalysis.commodityConversion')">
                  <el-checkbox-group v-model="customIndexForm.prodTransForm">
                    <el-checkbox
                      :label="$t('dataAnalysis.carNumbers')"
                      name="prodSurvey"
                    />
                    <el-checkbox
                      :label="$t('dataAnalysis.orderCounts')"
                      name="prodSurvey"
                    />
                    <el-checkbox
                      :label="$t('dataAnalysis.payCounts')"
                      name="prodSurvey"
                    />
                  </el-checkbox-group>
                </el-form-item>
                <span id="maxSelectSpan">{{ $t("dataAnalysis.upTo") }} {{ maxSelectNum }}
                  {{ $t("dataAnalysis.items") }}</span>
                <span>{{ $t("dataAnalysis.selected") }} {{ selectNum }}
                  {{ $t("dataAnalysis.items") }}</span>
              </el-form>
              <template #reference>
                <el-button>
                  {{
                    $t("dataAnalysis.selectIndicators")
                  }}
                </el-button>
              </template>
            </el-popover>
          </div>
        </div>
      </div>
      <!-- /栏目标题行 -->
      <!-- 图表 -->
      <common-chart
        v-if="timeSurveyChart.show"
        :options="timeSurveyChart.options"
        style="width: 100%; height: 300px"
      />

      <!-- /图表 -->
    </div>
    <!-- /整体看板 -->

    <!-- 商品排行整体看板 -->
    <div class="refund-plate">
      <!-- 栏目标题行 -->
      <div class="new-page-title">
        <div class="title-left">
          <p class="line" />
          <span class="text">{{
            $t("dataAnalysis.commodityRanking")
          }}</span>
        </div>

        <div class="title-right">
          <el-select
            v-model="dateValue2"
            style="width: 100px;"

            @change="setDateRange2(dateValue2)"
          >
            <el-option
              v-for="item in dateOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span
            v-if="dateValue2 === 2 || dateValue2 === 3"
            class="title-time"
          >{{ dateRange2[0] }} {{ $t('date.tip') }} {{ dateRange2[1] }}</span>
          <div class="title-picker">
            <el-date-picker
              v-if="dateValue2 === 5"
              v-model="preMonth2"

              style="width: 150px"
              type="month"
              :placeholder="$t('dataAnalysis.selectMonth')"
              :picker-options="monthPickerOptions"
              @change="handleMonth2()"
            />
          </div>
        </div>
      </div>
      <!-- /栏目标题行 -->

      <!-- 下 -->
      <div class="ranking-box">
        <div class="ranking-left-analysis">
          <div class="ranking-title">
            {{ $t("dataAnalysis.amountPaidTOP") }}
          </div>
          <el-table
            :data="payAmountTopData"
            class="ranking-left-table"
            style="width: 100%"
            :header-cell-style="analysisTableHeaderClass"
            :cell-style="analysisTableCellClass"
          >
            <el-table-column
              :label="$t('home.rank')"
              type="index"
              width="100"
            />
            <el-table-column
              :label="$t('product.prodName')"
              type="index"
              width="500"
            >
              <template #default="scope">
                <div class="table-cell-con">
                  <div class="table-cell-image">
                    <prod-pic
                      :pic="scope.row.pic"
                    />
                  </div>
                  <span class="table-cell-text">{{ scope.row.prodName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('home.payAmount')"
              align="center"
              prop="payAmount"
            />
          </el-table>
        </div>
        <div class="ranking-right">
          <div class="ranking-title">
            {{ $t("dataAnalysis.visitorsTop") }}
          </div>
          <el-table
            :header-cell-style="analysisTableHeaderClass"
            class="ranking-right-table"
            :cell-style="analysisTableCellClass"
            :data="visitorTopData"
            style="width: 100%"
          >
            <el-table-column
              :label="$t('home.rank')"
              type="index"
              width="100"
            />
            <el-table-column
              :label="$t('product.prodName')"
              width="410"
            >
              <template #default="scope">
                <div class="table-cell-con">
                  <div class="table-cell-image">
                    <prod-pic
                      :pic="scope.row.pic"
                    />
                  </div>
                  <span class="table-cell-text">{{ scope.row.prodName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('dataAnalysis.numberOfVisitors')"
              prop="visitorNum"
              align="center"
            />
            <el-table-column
              :label="$t('dataAnalysis.vToP')"
              align="right"
              prop="visitorToPayRate"
            >
              <template #default="scope">
                <span>{{ parseFloat(scope.row.visitorToPayRate * 100).toFixed(2) + '%' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- /商品排行整体看板 -->
  </div>
</template>

<script setup>
import ProdSurveyTable from './prod-survey-table.vue'
import moment from 'moment'

const PickerOptions = {
  disabledDate (time) {
    const date = moment().add(-1, 'days').startOf('days')
    return (
      time.getTime() > date.valueOf()
    )
  }
}
const monthPickerOptions = {
  disabledDate (time) {
    const month1 = moment().startOf('month')
    return (
      time.getTime() > month1.valueOf()
    )
  }
}
const dateOptions = [
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 1
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 2
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 3
  },
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 4
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 5
  }
]
const dateOptions2 = [
  {
    label: $t('dataAnalysis.nearly7'),
    value: 2
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 3
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 5
  }
]
const dateValue = ref(1)

onMounted(() => {
  dateValue.value = 1
  flushDateTime()
  setDateRange2(2)
  setDateRange3(3)
})

const analysisTableHeaderClass = computed(() => {
  return {
    height: '42px', background: '#FFF', color: '#666666', 'font-weight': '500', border: 'none'
  }
})
const analysisTableCellClass = computed(() => {
  return {
    height: '64px', padding: '8px 0', color: '#000'
  }
})
const customIndexForm = reactive({
  prodSurvey: [], // '在架商品数', '被访问商品数', '动销商品数'
  prodFlow: [$t('dataAnalysis.shareVisits'), $t('dataAnalysis.productViews'), $t('dataAnalysis.productVisitors')],
  prodTransForm: []
})
const selectNum = ref(customIndexForm.prodSurvey.concat(customIndexForm.prodFlow, customIndexForm.prodTransForm).length)
const maxSelectNum = ref(3) // 最多选择几项
const sumData = ref(customIndexForm.prodSurvey.concat(customIndexForm.prodFlow, customIndexForm.prodTransForm))
watch(() => customIndexForm.prodSurvey, (...params) => {
  selectNum.value = customIndexForm.prodSurvey.length + customIndexForm.prodFlow.length + customIndexForm.prodTransForm.length
  sumData.value = []
  sumData.value = sumData.value.concat(customIndexForm.prodSurvey).concat(customIndexForm.prodFlow).concat(customIndexForm.prodTransForm)
  const checks = document.getElementsByName('prodSurvey')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= maxSelectNum.value) {
      textShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < maxSelectNum.value) {
    textShare(span, 'black')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  } else if (selectNum.value > maxSelectNum.value) {
    nextTick(() => {
      customIndexForm.prodSurvey = params[1]
    })
  }
})
watch(() => customIndexForm.prodFlow, (...params) => {
  selectNum.value = customIndexForm.prodSurvey.length + customIndexForm.prodFlow.length + customIndexForm.prodTransForm.length
  sumData.value = []
  sumData.value = sumData.value.concat(customIndexForm.prodSurvey).concat(customIndexForm.prodFlow).concat(customIndexForm.prodTransForm)
  const checks = document.getElementsByName('prodSurvey')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= maxSelectNum.value) {
      textShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < maxSelectNum.value) {
    textShare(span, 'black')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  } else if (selectNum.value > maxSelectNum.value) {
    nextTick(() => {
      customIndexForm.prodFlow = params[1]
    })
  }
})

watch(() => customIndexForm.prodTransForm, (...params) => {
  selectNum.value = customIndexForm.prodSurvey.length + customIndexForm.prodFlow.length + customIndexForm.prodTransForm.length
  sumData.value = []
  sumData.value = sumData.value.concat(customIndexForm.prodSurvey).concat(customIndexForm.prodFlow).concat(customIndexForm.prodTransForm)
  const checks = document.getElementsByName('prodSurvey')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= maxSelectNum.value) {
      textShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < maxSelectNum.value) {
    textShare(span, 'black')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  } else if (selectNum.value > maxSelectNum.value) {
    nextTick(() => {
      customIndexForm.prodTransForm = params[1]
    })
  }
})
watch(sumData, () => {
  getRealTimechartData()
})
/**
 * 刷新时间
 */
let nowDate = null
let dateRange1 = [] // 商品整体概况的时间选择范围

const flushDateTime = () => {
  const date = new Date()
  nowDate = moment(date).format('LL')
  dateRange1 = [moment(date).format('L') + ' 00:00:00', nowDate]
  getProdSurvey()
}
/**
 * 1:今天 2: 近七天 3:近30天 4:自然日 5:自然月(前一个月如当前月为7月，自然月为6月)
 */
const prodData = ref({
  dateValue: 1, // 商品整体概况,时间选择状态
  data: {
    onSale: 0, // 在架商品数
    visitedProd: 0, // 被访问商品数
    dynamicSale: 0, // 动销商品数
    expose: 0, // 商品曝光数
    shareVisit: 0, // 分享访问数
    browse: 0, // 商品浏览量
    visitor: 0, // 商品访客数
    addCart: 0, // 加购件数
    orderNum: 0, // 下单件数
    payNum: 0 // 支付件数
  }, // 商品整体概况数据
  lastData: {},
  rate: {}
})
const dateRange = ref([])
const preMonth = ref('') // 前一个月
let startDay = null
let endDay = null
const setDateRange = (val) => {
  prodData.value.dateValue = val
  if (val === 1) {
    startDay = 0
    endDay = 0
    dateRange1 = [moment().format('L') + ' 00:00:00', nowDate]
    getProdSurvey()
    return
  } else if (val === 2) {
    startDay = -7
    endDay = -1
  } else if (val === 3) {
    startDay = -30
    endDay = -1
  } else if (val === 4) {
    startDay = -1
    endDay = 0
  } else if (val === 5) {
    preMonth.value = getPreMonth()
    getProdSurvey()
    return
  } else {
    return
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').startOf('days')
  // 结束时间
  const endTime = moment().add(endDay, 'days').endOf('days')
  dateRange.value = [startTime.format('L'), endTime.format('L')]
  dateRange1 = [startTime.format('LL'), endTime.format('LL')]
  getProdSurvey()
}
/**
 * 2: 近七天 3:近30天 5:自然月(前一个月如当前月为7月，自然月为6月)
 */
const dateRange2 = ref([]) // 展示的时间参数
let dateRange2Param = [] // 要传递的时间参数
const preMonth2 = ref('') // 前一个月

const setDateRange2 = (val) => {
  let startDay = null
  let endDay = null
  if (val === 2) {
    startDay = -7
    endDay = -1
  } else if (val === 3) {
    startDay = -30
    endDay = -1
  } else if (val === 5) {
    preMonth2.value = getPreMonth()
    getPayAmountTop()
    return
  } else {
    return
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').startOf('days')
  // 结束时间
  const endTime = moment().add(endDay, 'days').endOf('days')
  dateRange2.value = [startTime.format('L'), endTime.format('L')]
  dateRange2Param = [startTime.format('LL'), endTime.format('LL')]
  getPayAmountTop()
}
// 对可选日进行判断
const onDateDisabled = (time) => {
  return time.getTime() > moment().add(-1, 'days').valueOf() // 之后不可选
}
/**
 * 2: 近七天 3:近30天 5:自然月(前一个月如当前月为7月，自然月为6月)
 */
const dateRange3 = ref([]) // 展示的时间参数
let dateRange3Param = []
const preMonth3 = ref('') // 前一个月

const setDateRange3 = (val) => {
  let startDay = null
  let endDay = null
  if (val === 2) {
    startDay = -7
    endDay = -1
  } else if (val === 3) {
    startDay = -30
    endDay = -1
  } else if (val === 5) {
    preMonth3.value = getPreMonth()
    getProdTrendAnalysis()
    return
  } else {
    return
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').startOf('days')
  // 结束时间
  const endTime = moment().add(endDay, 'days').endOf('days')
  dateRange3.value = [startTime.format('L'), endTime.format('L')]
  dateRange3Param = [startTime.format('LL'), endTime.format('LL')]
  getProdTrendAnalysis()
}
const getPreMonth = () => {
  const date = moment().add(-1, 'month').startOf('month')
  // 上一个月的开始时间
  const timeStar = moment(date).startOf('month').format('LL')
  // 上一个月的结束时间
  const timeEnd = moment(date).endOf('month').format('LL')
  dateRange1 = [timeStar, timeEnd]
  dateRange2Param = [timeStar, timeEnd]
  dateRange3Param = [timeStar, timeEnd]
  return moment(date).format('L')
}
const getMonthToStr = (date) => {
  const start = moment(date).startOf('month').format('LL')
  const end = moment(date).endOf('month').format('LL')
  return [start, end]
}
/**
 * 当dateRange == 4 监听dateRange[0]的变化
 */
const handleRangeFour = () => {
  const date = dateRange.value[0]
  if (date) {
    const start = moment(date).startOf('days').format('LL')
    const end = moment(date).endOf('days').format('LL')
    dateRange1 = [start, end]
  } else {
    dateRange1 = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
  }
  // page.current = 1
  getProdSurvey()
}
/**
 * 当dateRange == 5 监听dateRange[0]的变化
 */
const handleMonth = () => {
  if (preMonth.value) {
    dateRange1 = getMonthToStr(preMonth.value)
  } else {
    dateRange1 = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
  }
  getProdSurvey()
}
const handleMonth2 = () => {
  if (preMonth2.value) {
    dateRange2Param = getMonthToStr(preMonth2.value)
  } else {
    dateRange2Param = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
  }
  getPayAmountTop()
}
const handleMonth3 = () => {
  if (preMonth3.value) {
    dateRange3Param = getMonthToStr(preMonth3.value)
  } else {
    dateRange3Param = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
  }
  getProdTrendAnalysis()
}
/**
 * 获取商品概况数据
 */
const getProdSurvey = () => {
  http({
    url: http.adornUrl('/admin/prodAnalysis/getProdSurvey'),
    method: 'get',
    params: http.adornParams(
      {
        shopId: null,
        dateType: dateValue.value,
        startTime: dateRange1[0],
        endTime: dateRange1[1]
      }
    )
  }).then(({ data }) => {
    if (data) {
      prodData.value.data = data.data
      prodData.value.lastData = data.lastData
      prodData.value.rate = data.rate
    }
  })
}
/**
 * 商品趋势分析数据
 */
const dateValue3 = ref(3)
let dateArr = [] // 趋势图时间数组
let seriesDataArr = [] // 所有数据

const getProdTrendAnalysis = () => {
  http({
    url: http.adornUrl('/admin/prodAnalysis/getProdTrendAnalysis'),
    method: 'get',
    params: http.adornParams(
      {
        dateType: dateValue3.value,
        startTime: dateRange3Param[0],
        endTime: dateRange3Param[1]
      }
    )
  }).then(({ data }) => {
    if (data) {
      dateArr = []
      seriesDataArr = []
      const obj1 = initObj($t('dataAnalysis.goodsOnShelf'))
      const obj2 = initObj($t('dataAnalysis.goodsVisited'))
      const obj3 = initObj($t('dataAnalysis.goodsSold'))
      const obj4 = initObj($t('dataAnalysis.shareVisits'))
      const obj5 = initObj($t('dataAnalysis.productViews'))
      const obj6 = initObj($t('dataAnalysis.productVisitors'))
      const obj7 = initObj($t('dataAnalysis.carNumbers'))
      const obj8 = initObj($t('dataAnalysis.orderCounts'))
      const obj9 = initObj($t('dataAnalysis.payCounts'))
      data.forEach(i => {
        dateArr.push(i.currentDay)
        obj1.data.push(i.onSale)
        obj2.data.push(i.visitedProd)
        obj3.data.push(i.dynamicSale)
        obj4.data.push(i.shareVisit)
        obj5.data.push(i.browse)
        obj6.data.push(i.visitor)
        obj7.data.push(i.addCart)
        obj8.data.push(i.orderNum)
        obj9.data.push(i.payNum)
      })
      seriesDataArr.push(obj1)
      seriesDataArr.push(obj2)
      seriesDataArr.push(obj3)
      seriesDataArr.push(obj4)
      seriesDataArr.push(obj5)
      seriesDataArr.push(obj6)
      seriesDataArr.push(obj7)
      seriesDataArr.push(obj8)
      seriesDataArr.push(obj9)
    }
    controlTrendDataShow()
    getRealTimechartData()
  })
}
/**
 * 控制趋势图的数据显示
 */
let seriesControlDataArr = []// 控制显示的数据
const lineStyle = [
  {
    normal: {
      color: '#29CB97',
      lineStyle: {
        color: '#29CB97'
      }
    }
  },
  {
    normal: {
      color: '#0058FF',
      lineStyle: {
        color: '#0058FF'
      }
    }
  },
  {
    normal: {
      color: '#F56C6C',
      lineStyle: {
        color: '#F56C6C'
      }
    }
  }
]
const areaStyle = [
  {
    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: 'rgba(41, 203, 151, 0.41)' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  },
  {
    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: 'rgba(24,144,255,0.6)' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  },
  {
    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: '#F56C6C' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  }
]
const controlTrendDataShow = () => {
  seriesControlDataArr = []
  let length = 0
  sumData.value.forEach(i => {
    length = length + 1
    seriesDataArr.forEach(element => {
      if (i === element.name) {
        element.smooth = true
        element.itemStyle = lineStyle[length - 1]
        element.areaStyle = areaStyle[length - 1]
        seriesControlDataArr.push(element)
      }
    })
  })
  if (sumData.value.length < 1) {
    seriesControlDataArr = []
  }
  if (length === sumData.value.length) {
    getRealTimechartData()
  }
}
/**
 * 初始化一个obj
 */
const initObj = (name) => {
  const obj = {}
  obj.name = name
  obj.type = 'line'
  obj.data = []
  return obj
}

const timeSurveyChart = reactive({
  options: {},
  show: false
})
/**
 * 商品趋势分析表
 */
const getRealTimechartData = () => {
  timeSurveyChart.options = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: { // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1,
        lineHeight: '20px'
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);'
    },
    legend: {
      data: sumData.value,
      selectedMode: false, // 关闭图例选择
      itemHeight: 8, // 图例标记的图形宽度。
      itemWidth: 18, // 图例标记的图形高度。
      icon: 'roundRect', // 图例项的 icon。
      itemGap: 40, // 图例每项之间的间隔
      textStyle: { // 图例的公用文本样式。
        color: '#999999',
        size: 12,
        padding: [0, 0, 0, 10]
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dateArr,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false }
    },
    series: seriesControlDataArr
  }
  timeSurveyChart.show = true
}
/**
 * 获取支付金额TOP
 */
const dateValue2 = ref(2)
const payAmountTopData = ref([]) // 支付金额TOP
const visitorTopData = ref([]) // 访问top

const getPayAmountTop = () => {
  payAmountTopData.value = []
  visitorTopData.value = []
  http({
    url: http.adornUrl('/admin/prodAnalysis/getPayAmountTop'),
    method: 'get',
    params: http.adornParams(
      {
        current: 1,
        size: 6,
        dateType: dateValue2.value,
        startTime: dateRange2Param[0],
        endTime: dateRange2Param[1]
      }
    )
  }).then(({ data }) => {
    if (data) {
      payAmountTopData.value = data.payAmounts
      visitorTopData.value = data.visitors
    }
  })
}
/**
 * 文字效果
 */
const textShare = (div, color) => {
  div.style.color = color
}
</script>

<style lang="scss" scoped>
.page-overview {
  .title-text-info {
    padding: 20px;
    height: 60px;
    margin-top: 20px;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    border: 1px solid #94B4EB;
    background: #edf4ff;
    box-shadow: 0 2px 6px rgba(51, 51, 51, 0.04);
  }
  .title-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .new-page-title  {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .new-page-title-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .title-right {
    display: flex;
    align-items: center;
    .title-time {
      padding-right: 0;
    }
  }
  .title-picker {
    margin-left: 10px;
    margin-right: 10px;
  }

  .title-time {
    color: #999999;
    vertical-align: middle;
    margin: 0 6px;
  }

  /**
  整体看板
   */
  .whole-plate {
    margin: 20px 0 30px;
  }

  /**
  退款看板
   */
  .refund-plate {
    .ranking-box {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      .ranking-left-analysis,
      .ranking-right {
        width: calc(50% - 10px);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid #EAF0F4;
        border-bottom: none;
        :deep(.el-table td)  {
          border: none;
        }
        .ranking-left-table,
        .ranking-right-table{
          flex: 1;
        }
      }
      .ranking-title {
        font-size: 16px;
        font-weight: 400;
        line-height: 50px;
        height: 50px;
        color: #463333;
        padding-left: 20px;
        margin-bottom: 10px;
        background: #F7F8FA;
      }
    }
  }
  // 图片 + 文本
  .table-cell-con {
    display: flex;
    align-items: center;
    .table-cell-image {
      width: 42px;
      height: 42px;
      margin-right: 10px;

    }
    .table-cell-text {
      flex: 1;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 20px;
    }
  }
}
div :deep(.el-table__header-wrapper) {
  min-height: 64px;

}
</style>
